<template>
  <modal>
    <div class="act_rule">
      <div class="rule_hdr"></div>
      <div class="rule_hdr_bg rule_hdr_01 md_s_font white_color">活动规则</div>
      <div class="rule_hdr_bg rule_hdr_02"></div>
      <div class="rule_cont">
        <ul class="rule_main sm_font">
          <li class="time">活动时间：{{startTime | endTime2}} - {{endTime | endTime2}}</li>
          <li>每个用户每天有3次投票权利，同一张优惠券每个用户只可投递一次；</li>
          <li>投票结束后统计投票结果，根据排名来随机抽取用户赠送优惠券。</li>
        </ul>
      </div>
    </div>
    <div class="close_modal" @click="close_modal"></div>
  </modal>
</template>

<script>
export default {
  props: {
    startTime: [String],
    endTime: [String]
  },
  methods: {
    close_modal() {
      this.$emit('close_modal')
    }
  }
}
</script>

<style lang="scss" scoped>
.act_rule {
    width: 90%;
    margin: 40% auto 0;
    position: relative;
    .rule_hdr {
        width: 90%;
        margin: auto;
        height: 5rem;
        background-image: url("../../../images/ballot_modal_hd.png");
        background-position: 50% top;
        background-repeat: no-repeat;
        position: relative;
        margin-bottom: -0.7rem;
        z-index: -1;
    }
    .rule_hdr_bg {
        width: 100%;
        position: absolute;
        background-repeat: no-repeat;
        top: 0;
    }
    .rule_hdr_01 {
        height: 4.8rem;
        background-image: url("../../../images/ballot_modal_hd_02.png");
        background-position: 50% top;
        background-size: auto 100%;
        text-align: center;
        line-height: 6.4rem;
        font-weight: bold;
        letter-spacing: 0.05rem;
    }
    .rule_hdr_02 {
        background-image: url("../../../images/ballot_modal_bg.png");
        background-size: 100%;
        bottom: 0;
    }
    .rule_cont {
        width: 90%;
        padding: 0.8rem;
        margin: auto;
        background-color: #582ec1;
        border-radius: 3px;
        .rule_main {
            width: 100%;
            padding: 1.2rem;
            margin: auto;
            border-radius: 3px;
            background-color: #fff;
            li {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                border-bottom: 1px dotted #ccc;
                &.time {
                  color: #5c32c0;
                  font-size: 0.8rem;
                  background-image: url("../../../images/ballot_title_time.png");
                  background-repeat: no-repeat;
                  background-position: 0 center;
                  padding-left: 9%;
                  background-size: 6%;
                }
                &:last-child {
                    border-bottom: none;
                }
            }
        }
    }
}
.close_modal {
  width: 16px;
  height: 16px;
  background-image: url("../../../images/close.png");
  background-repeat: no-repeat;
  margin: auto;
  background-size: cover;
  margin-top: 1.5rem;
}
</style>
